<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="">aaaa导航1</a></li>
            <li><a href="">aaaa导航2</a></li>
            <li><a href="">aaaa导航3</a></li>
            <li><a href="">aaaa导航4</a></li>
        </ul>
    </nav>
</header>
<div class="content">
    <aside>
        <h2>侧栏标题</h2>
        <label for="email">邮箱地址:</label>
        <input type="email" placeholder="这是一个文本框" id="email"><br>
        <p>请输入正确的邮箱格式</p>
        <label for="password">密码:</label>
        <input type="password" id="password"><br>
        <label for="repeat-password">重复密码:</label>
        <input type="password" id="repeat-password">
        <p>密码为6-16位数字英文</p>
        <div>
            <label>性别:</label>
            <input type="radio" name="sex" checked id="man"><span></span>男</span>
            <input type="radio" name="sex" id="woman"><span>女</span>
        </div>
        <label for="city">城市:</label>
        <select name="selectAge" id="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select><br>
        <label>爱好:</label>
        <input type="checkbox" id="sports"><span for="sports">运动</span><input type="checkbox" id="art"><span>艺术</span><input type="checkbox" id="science"><span>科学</span><br>
        <label>个人描述:</label><textarea name="" id="" cols="20" rows="2" placeholder="个人描述"></textarea><br>
        <div class="btn">
            <button>确认提交</button>
        </div>


    </aside>





    <section class="one">
        <h2>文章一级标题</h2>
        <h2 class="bigTitle">文章二级标题</h2>
        <p class="smallTitle"><span>文章作者</span> <span>发布时间</span></p>
        <p>这是一个很长的段落啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 换行了<br>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊<a href="">这里是一个链接啊啊啊啊</a>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        <p>这是一个很长的段落啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <br>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊<a href="">这里是一个链接啊啊啊啊</a>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        <img src="erweima.png" alt="">
        <p>这是一个很长的段落啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 <br>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊<a href="http://www.baidu.com">这里是一个链接到百度</a>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
            <li>列表项目4</li>
            <li>列表项目5</li>
        </ul>
    </section>
    <section class="two">
        <h2>第二篇文章一级标题</h2>
        <h2  class="bigTitle">第二篇文章二级标题</h2>
        <img src="erweima.png" alt="">
        <ul>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
            <li>列表项目4</li>
            <li>列表项目5</li>
        </ul>
    </section>

    <section class="imgs">
        <h2>图片</h2>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
        <div><p>好看的图片</p><img src="erweima.png" alt=""></div>
    </section>
    <section class="three">
        <h2>第三篇文章一级标题</h2>
        <h2  class="bigTitle">第三篇文章二级标题</h2>
        <p class="smallTitle"><span>文章作者</span> <span>发布时间</span></p>
        <ol>
            <li>列表项目1</li>
            <li>列表项目2</li>
            <li>列表项目3</li>
            <li>列表项目4</li>
            <li>列表项目5</li>
        </ol>
        <table  border="1"  cellspacing="0" cellpadding="0">
            <tbody>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
            <tr>
                <td>表内单元格</td>
                <td>表内单元格</td>
                <td><a href="">操作</a></td>
            </tr>
            <tr>
                <td>表内单元格</td>
                <td>表内单元格</td>
                <td><a href="">操作</a></td>
            </tr>
            <tr class="noborder">
                <td>总计</td>
                <td colspan="2">1000</td>
            </tr>
            </tbody>
        </table>
    </section>
</div>

<footer>
    <p>版权所有©</p>
</footer>
</body>
</html>